var form = document.querySelector('form');
form.onsubmit = function(event){
    //1、 阻止事件的默认行为
    event.preventDefault();
    //2、 获取登录数据
    var name = document.querySelector('input:nth-of-type(1)').value;
    var password = document.querySelector('input:nth-of-type(2)').value;
    console.log(name);
    console.log(password);

    //3、 发请求，提交数据
    // request:请求 
    // extend:扩展 
    // XML:extensible markup language 可扩展的标记语言
    // http:hypertext transform protocol 超文本传输协议

    //3.1 新建一个请求对象
    var request = new XMLHttpRequest();

    // 3.4 获取服务器的响应数据

    // 请求的状态发生变化的时候，会触发readystatechange事件
    // 可以通过监听这个事件,获取响应数据
    request.onreadystatechange = function(){
        console.log('----');
        // readyState取值有0,1,2,3,4
        // 值 	状态 	描述
        // 0 	UNSENT 	代理被创建，但尚未调用 open() 方法。
        // 1 	OPENED 	open() 方法已经被调用。
        // 2 	HEADERS_RECEIVED 	send() 方法已经被调用，并且头部和状态已经可获得。
        // 3 	LOADING 	下载中； responseText 属性已经包含部分数据。
        // 4 	DONE 	下载操作已完成。
        console.log(request.readyState);
        if(request.readyState == 4){
            // 服务端发送数据结束了；
            // responseText:响应数据
            console.log(request.responseText);
            // JSON.parse:parse:解析
            // 把字符串转化为对象
            var data = JSON.parse(request.responseText);
            console.log(data);
            if(data.result == 1){
                // 登录成功,跳转到主页
                // location:地址对象
                // href：设置地址;相对于当前html文件的地址
                // ../ :返回上级 
                //  ./ :当前路径
                // 
                location.href = './home.html';
            }else{
                // 登录失败，提示失败原因
                alert(data.message);
            }
        }
    }
    
    // 3.2
    // para1:请求方式
    // para2：url
    request.open('GET','api/login.php?name='+name+'&password='+password);
    
    //send:发送
    //3.3 发请求 
    request.send();
}